<template>
  <div class="lf_map">
    <div ref="lfmap"
         id="lfmap"></div>
    <div id="map_el"
         @change="getClick"
         ref="map_pop"></div>
  </div>
</template>

<script lang='ts'  setup>
import Map from './map_function'
const LF = new Map()
import {
  ref,
  reactive,
  onMounted,
  h,
  defineComponent,
  createApp,
  provide,
  nextTick,
} from 'vue'
import popupBox from './popupBox.vue'
import testDatas from './mapData.json'

const map_pop = ref()
const lfmap = ref(null)
const state = reactive({
  _map: null, //存储地图信息
  lf_targetRange_circle: [], // 目标范围
  lf_default_line: [], // 线条
  lf_default_area: [], // 区域
})
// 初始化地图
const initMap = async () => {
  let mapLayer =
    window.config.MAP_DATA.url +
    ':' +
    window.config.MAP_DATA.port +
    '/' +
    window.config.MAP_DATA.type
  state._map = LF.__create_map(lfmap.value, mapLayer, 8, 7, 15)
  // 地图标点
  testDatas.marks.forEach((item) => {
    SetEventMarker(item.latlngs, item.type)
    setTitleTip(item, 'tip_name')
  })

  // 绘制区域
  setArea(testDatas.area, '#BB6909', '危险区域')


   // 地图点击事件
  state._map.on('click', (markInfo) => {
    clearLayerAll()
  })
}
//图标过滤
const iconFilter = (type: String) => {
  return type === 'info'
    ? './address_info.png'
    : type === 'red'
    ? './address_red.png'
    : ''
}

/**
 * latlngs array [30,116]
 * type String  显示图标的样式
 */
const SetEventMarker = (latlngs: number[], type: String) => {
  let iconUrl = iconFilter(type)
  const { _map, icon_markers } = LF.__create_icon_marker({
    latlngs,
    iconUrl,
    iconSize: [30, 30],
  })
  state._map = _map
  // 标记点点击
  icon_markers.on('click', onClickMarker)
}

// 标记点的 提示框
const setTitleTip = (options, className, type = null) => {
  const { _map, icon_div_markers } = LF.__create_iconDiv_marker(
    options.latlngs,
    {
      className,
      html: options.name,
      iconAnchor: [28, 35],
    }
  )
  state._map = _map
}

// 点击标记点
async function onClickMarker(markInfo) {
  nextTick(() => {
    let data = { ...markInfo, LF }
    let mapPop = map_pop.value
    // 弹窗
    let el = createApp(popupBox, data).mount(mapPop)
    const { _map, custom_popup } = LF.__create_custom_popup(markInfo, el.$el)
    let showCircle = [
      {
        className: 'min_circle',
        circleSize: 50,
      },
      {
        className: 'max_circle',
        circleSize: 75,
      },
    ]
    setTargetRangeCircle(markInfo.latlng, showCircle)
    // 绘制线条
    let lineDot = [
      [26, 130],
      [28, 131],
      [26, 126],
    ]
    setLine(lineDot)
  })
}

// 标点周边范围 ：（防御区域 攻击区域）大小圈
const setTargetRangeCircle = (point, circles) => {
  clearLayer('lf_targetRange_circle')
  circles.forEach((item) => {
    const { _map, icon_div_markers } = LF.__create_iconDiv_marker(point, {
      className: item.className,
      iconAnchor: [item.circleSize, item.circleSize],
    })
    state.lf_targetRange_circle.push(icon_div_markers)
    state._map = _map
  })
}
// 坐标之间的线 ：无箭头虚线
const setLine = (latlngs: Number[]) => {
  const { _map, default_line } = LF.__create_line(latlngs, {
    color: 'red',
    dashArray: '5',
    weight: 2,
    opacity: 0.9,
  })
  state.lf_default_line.push(default_line)
  state._map = _map
  //箭头
  setArrowLine(default_line)
}

// 绘制区域
const setArea = (latlngs: Number[], color: String, seaAreaName: String) => {
  setAreaFont(latlngs, 'fontTitle', `<div>区域</div>`, seaAreaName)
  const { _map, zone_markers } = LF.__create_polygon(latlngs, {
    color: 'red',
    dashArray: '4',
    weight: 1,
    opacity: 0.8,
  })
  state.lf_default_area.push(zone_markers)
  state._map = _map
}

/**
 *  带上字体
 */
// 计算区域的中心点
const setAreaFont = (
  latlngs: Number[],
  className: String,
  innerHtml: String,
  seaAreaName: String
) => {
  let FontDot = []
  let x = [],
    y = []
  latlngs.map((v) => {
    x.push(v[0] * 1)
    y.push(v[1] * 1)
  })
  x.sort((a, b) => a - b)
  y.sort((a, b) => a - b)
  FontDot[0] = (x[0] + x[x.length - 1]) / 2
  FontDot[1] = (y[0] + y[y.length - 1]) / 2

  const { _map, icon_div_markers } = LF.__create_iconDiv_marker(FontDot, {
    className: 'myFont',
    html: `${seaAreaName}`,
    iconAnchor: [50, 15],
  })
  state.lf_default_area.push(icon_div_markers)
  state._map = _map
}
// 清理图层 区域圈
const clearLayer = (type) => {
  if (type === 'lf_targetRange_circle') {
    state.lf_targetRange_circle.map((item) => state._map.removeLayer(item))
    state.lf_targetRange_circle = []
    testDatas.area = []
  }
}
const clearLayerAll = () => {
  state.lf_default_area.map((item) => state._map.removeLayer(item))
  state.lf_default_area = []
}

onMounted(() => {
  initMap()
})
</script>
<style scoped >
#lfmap {
  width: 100%;
  height: 100%;
  background: #011223;
}
:deep(.tip_name) {
  top: -2px;
  left: -5px;
  overflow: hidden;
  background: red;
  width: 60px !important;
  height: 20px !important;
  padding: 1px 3px;
  text-align: center;
  border-radius: 2px;
  line-height: 22px;
  color: #06132a;
  background-color: rgb(240, 245, 245);
  box-shadow: 0 0 5px 2px rgb(87, 86, 86);
}
:deep(.leaflet-popup-content-wrapper, .leaflet-popup-tip) {
  background-color: rgba(24, 48, 87, 8) !important;
}
:deep(.leaflet-popup-tip) {
  background-color: rgba(24, 48, 87, 8) !important;
}
:deep(.leaflet-popup-content) {
  margin: 0;
  padding: 15px;
}

:deep(.min_circle) {
  background-color: rgba(224, 97, 97, 0.2);
  width: 100px !important;
  height: 100px !important;
  border-radius: 50%;
  z-index: 890 !important;
  opacity: 0.5 !important;
  border: 1px solid #e06161;
}

:deep(.max_circle) {
  background-color: rgba(42, 207, 226, 0.2);
  width: 150px !important;
  height: 150px !important;
  border-radius: 50%;
  border: 1px solid #2acfe2;
}
:deep(.myFont) {
  width: 100px !important;
  height: 20px !important;
  color: #fff;
}
</style>